<template>
  <div>
    <div id="rightThree"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      let myChart = this.$echarts.init(document.getElementById("rightThree"));
      myChart.setOption({
        legend: {
          top: "90%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        series: [
          {
            name: "点位统计",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [
              { value: 20, name: "参数0" },
              { value: 26, name: "参数1" },
              { value: 24, name: "参数2" },
              { value: 25, name: "参数3" },
              { value: 20, name: "参数4" },
              { value: 25, name: "参数5" },
              { value: 30, name: "参数6" },
              { value: 42, name: "参数7" },
            ],
            label: {
              fontSize: 10,
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
#rightThree {
  height: 240px;
}
</style>